<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制定活动量计划</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=yes"/><!-- 禁用手机号码识别 -->
    <meta name="format-detection" content="email=no" /> <!-- 禁用邮箱识别 -->

    <link rel="stylesheet" href="./css/common.css">
    <script src="./libs/zepto.js"></script>
    <script src="./libs/touch.js"></script>
    <script src="./libs/selector.js"></script>
    <script src="./libs/event.js"></script>
    <script src="./libs/fx.js"></script>
    <script src="./libs/ajax.js"></script>
    <script src="./libs/template.js"></script>
</head>

<body>

<!--整体布局盒子-->
<div class="container">
    <header>
        <a href="javascript:;0"><img src="./images/lefticon.png" alt=""></a>
        <span>制定活动量计划</span>
    </header>

    <section class="planDetails">
        <div class="bigBox">

        </div>
    </section>

<!--        <div class="bigBox">
            <div class="planDetails_Box">
                <div class="header">
                    <a href="javascript:;0"><img src="./images/mianfang.png" alt=""></a>
                    <div class="custNo">NO.001</div>
                    <div class="pretreatDt text-right">2016-10-22 17:30</div>
                </div>
                <div class="main">
                    <div class="mainTel">
                        <span class="custName">张三</span>
                        <span class="text-right contTel" style="padding-right: 4rem">15000522916</span>
                        &lt;!&ndash;点击电话时，需要跳转至拨打电话主页面，并将电话号码带出&ndash;&gt;
                        <a href="javascript:;0"><img src="./images/dianhua2.png" alt=""></a>
                    </div>
                    <div class="commentsLong">这是一个黄金客户</div>
                </div>
                <a class="mainModification" href="javascript:;0"><img src="./images/bianji.png" alt="">修改</a>
            </div>
            <a class="delete" href="javascript:;0"><img src="./images/delete.png" alt=""></a>
        </div>-->
    <!--模版-->
    <script type="text/template" id="model">
        {{each list}}


        {{/each}}
    </script>




    <!--创建活动量计划-->
    <footer class="makePlan_foot">
        <span>创建活动量计划</span>
    </footer>
</div>
</body>

<script>

    //1、input要和每个计划详情对应上，当选中删除的时候对应的计划详情删除
    $(function () {

        //从后台获取用户信息
        function makePlanAjax () {
            //每页显示4条
            $.ajax({
                type: 'POST',
                url: 'http://10.50.122.60:8080/webGate/app/actPlanList',
                data: {
                    domainAccount:"LIULAN239",
                    userId:"LIULAN239",
                    pagesize:"5",
                    current:"5"
                },
                dataType: 'json',
                success: function(data){
                    if(data.status==1){


                    }
                }
            })
        }
        makePlanAjax ();

        //动态创建用户信息表
        var data = {
            "status" : 1,
            "msg" : "查询成功",
            "data" : {
                "totalnum":238,
                "totalpage":48,
                "info":[
                    {"custNo":"600040189855","ROWNUM_":21,"custName":"张三","contTel":"+8615390427408"},
                    {"custNo":"600048136256","ROWNUM_":22,"custName":"李四","contTel":"+8615388135557"},
                    {"custNo":"600027129499","ROWNUM_":23,"custName":"王五","contTel":"+8613980702487"},
                    {"custNo":"600019725785","ROWNUM_":24,"custName":"赵六","contTel":"+86028-84476660"},
                    {"custNo":"600048136256","ROWNUM_":22,"custName":"孙七","contTel":"+8615388135557"},
                    {"custNo":"600027129499","ROWNUM_":23,"custName":"张飞","contTel":"+8613980702487"},
                    {"custNo":"600019725785","ROWNUM_":24,"custName":"关羽","contTel":"+86028-84476660"},
                    {"custNo":"600048136256","ROWNUM_":22,"custName":"马超","contTel":"+8615388135557"},
                    {"custNo":"600027129499","ROWNUM_":23,"custName":"吕布","contTel":"+8613980702487"},
                    {"custNo":"600019725785","ROWNUM_":24,"custName":"赵云","contTel":"+86028-84476660"},
                    {"custNo":"600048136256","ROWNUM_":22,"custName":"张辽","contTel":"+8615388135557"},
                    {"custNo":"600027129499","ROWNUM_":23,"custName":"太史慈","contTel":"+8613980702487"},
                    {"custNo":"600019725785","ROWNUM_":24,"custName":"许褚","contTel":"+86028-84476660"},
                    {"custNo":"600061208677","ROWNUM_":25,"custName":"典韦","contTel":"13908036138"}
                ]
            }
        };

        var number = data.data.info.length;//信息条数

        var _html = '';//每一页中所有用户信息

        var userInfo;//用户信息数据

        for(var i=0 ; i < 4 ; i++ ){

            userInfo = [
                '<div class="planDetails_Box">',
                '<div class="header">',
                '<a href="javascript:;0"><img src="./images/mianfang.png" alt=""></a>',
                '<div class="custNo">NO.00'+(i+1)+'</div>',
                '<div class="pretreatDt text-right">2016-10-22 17:30</div>','</div>','<div class="main">',
                '<div class="mainTel">',
                '<span class="custName">'+data.data.info[i].custName+'</span>',
                '<span class="text-right contTel" style="padding-right: 4rem">'+data.data.info[i].contTel+'</span>',
                '<a href="javascript:;0"><img src="./images/dianhua2.png" alt=""></a>',
                '</div>',
                '<div class="commentsLong">这是一个黄金客户</div>',
                '</div>',
                '<a class="mainModification" href="javascript:;0"><img src="./images/bianji.png" alt="">修改</a>',
                '<a class="delete" href="javascript:;0"><img src="./images/delete.png" alt=""></a>',
                '</div>'
            ].join("");

            _html += userInfo;

        }

        $(".bigBox").html(_html);

//        moveBox(document.)

        //给删除按钮注册事件
        $(".planDetails_Box>.delete").on('click',function(){
            $(this.parentNode).remove();
            /*注意此时需要发送ajax请求,同时删除后台的对应的用户信息,不然页面刷新后,删除的盒子又会被重新渲染*/
        });

        //获取存储  设置用户的信息 对应值
//        function get() {
//            $(".custNo").html(localStorage.getItem("custNo"))                                    //客户号
//            $(".custName").html(localStorage.getItem("custName"))                                   //客户姓名
//
//            $(".contTel").html(localStorage.getItem("contTel"))                                  //联系方式
//            $(".pretreatDt").html(localStorage.getItem("pretreatDt") )                                 //预处理日期
//            $(".commentsLong").html(localStorage.getItem("commentsLong"))                          //其他关键信息
//        }
//        get();
        //设置制定活动量计划的存储 给到编辑活动量计划使用


        //设置计划详情 奇数行偶数行不同的背景图片,通过索引设置第几条计划
//        $.each($(".planDetails_Box"),function (i,v) {
//            if(i%2==0){
//                //奇数
//                $(v).css({
//                    "background-image":"url('./images/bgbox1.png')",
//                    "-webkit-background-size": "100% 100%",
//                    "background-size": "100% 100%"
//                })
//            }else {
//                //偶数
//                $(v).css({
//                    "background-image":"url('./images/bgbox2.png')",
//                    "-webkit-background-size": "100% 100%",
//                    "background-size": "100% 100%"
//                });
//            }
//        });

        //左滑出现删除按钮
        //设置左滑时planDetails_Box整体往左移动8rem

        $(".planDetails_Box").on("swipeLeft",function(){
            $(this).css({'transform':'translateX(-100px)','-webkit-transform':'translateX(-100px)'});
        }).on("swipeRight",function(){
            $(this).css({'transform':'none','-webkit-transform':'none'});
        });



        //点击新增按钮跳转到newPlan界面
        $(".makePlan_foot span").on("tap",function () {
            window.location.href="./newPlan.html"
        });

        //重新编辑按钮，点击时，跳到修改页面，可以将计划重新修改，可以在编辑页面增加一个删除该计划按钮
        $(".mainModification").on("tap",function () {
            window.location.href="./modification.html"
        });

//        点击电话时，需要跳转至拨打电话主页面，并将电话号码带出


    })







</script>
<script src="ddd.js"></script>
</html>